import { createFromIconfontCN } from '@ant-design/icons';
import { Button, Card, ConfigProvider, Space } from 'antd';
import { createStyles } from 'antd-style';
import './custom.css';

interface useAppType {
  key: string;
  title: string;
  href: string;
  icon: React.ReactNode;
}

const useStyle = createStyles(({ prefixCls, css }) => ({
  linearGradientButton: css`
    &.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
      > span {
        position: relative;
      }

      &::before {
        position: absolute;
        background: linear-gradient(135deg, #79e5a8, #38bdf8);
        border-radius: inherit;
        opacity: 1;
        transition: all 0.3s;
        content: '';
        inset: -1px;
      }

      &:hover::before {
        opacity: 0;
      }
    }
  `,
}));

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4870840_ehrofciuqz.js', // 在 iconfont.cn 上生成
});

const Index: React.FC = () => {
  const { styles } = useStyle();

  const useAppList: useAppType[] = [
    {
      key: '1',
      title: 'Java',
      href: '#',
      icon: <MyIcon type={'icon-java'} />,
    },

    {
      key: '3',
      title: 'Vue.js',
      href: '#',
      icon: <MyIcon type={'icon-vue'} />,
    },
    {
      key: '4',
      title: 'React.js',
      href: '#',
      icon: <MyIcon type={'icon-react'} />,
    },
    {
      key: '5',
      title: 'Python',
      href: '#',
      icon: <MyIcon type={'icon-python'} />,
    },
    {
      key: '2',
      title: 'SpringBoot',
      href: '#',
      icon: <MyIcon type={'icon-spring-boot'} />,
    },
  ];

  return (
    <>
      <div className="flex-grow w-full">
        <section className="relative z-0 border-b bo-c pt-6 md:pt-16 pb-10 md:pb-16 lg:pb-26 px-5 lg:px-8">
          <div className="grid lg:grid-cols-2 max-w-7xl mx-auto">
            <div className="flex flex-col justify-center lt-lg:mb-12">
              <h2 className="relative w-fit text-4xl font-bold tracking-tight sm:text-5xl mb-10">
                毕设工坊
              </h2>
              <p className="text-lg leading-8 txt-1 max-w-120">
                使用标准的OpenAI接口协议访问280+模型，不限时间、按量计费、拒绝逆向、极速对话、明细透明，无隐藏消费，在线充值后即可使用所有模型。
              </p>
              <p className="text-lg leading-8 txt-1 max-w-120">
                —— <b className="text-base">极速响应，让速度为您见证一切！</b>
              </p>
              <div className="mt-10 flex items-center gap-x-4">
                <ConfigProvider
                  button={{
                    className: styles.linearGradientButton,
                  }}
                >
                  <Space>
                    <Button type="primary" size="large" shape={'round'}>
                      前往控制台
                    </Button>
                  </Space>
                </ConfigProvider>
                <Space>
                  <Button size="large" shape={'round'}>
                    帮助中心
                  </Button>
                </Space>
              </div>
              <div className="mt-16">
                <b>常用框架支持</b>
                <div className="flex items-center gap-5 mt-5 mb-5 flex-wrap relative">
                  {useAppList.map((appItem) => {
                    return (
                      <a
                        key={appItem.key}
                        className={
                          'w-14 h-14 bg-white rounded-2xl border-2 flex items-center justify-center text-3xl'
                        }
                        style={{
                          boxShadow: 'rgba(23, 23, 23, 0.02) 2px 4px 16px;',
                        }}
                      >
                        {appItem.icon}
                      </a>
                    );
                  })}
                </div>
              </div>
            </div>
            <div className="relative flex justify-center shrink-0">
              <div className="absolute -top-32 op-60 -z-1 of-hidden lt-2xl:hidden 2xl:w-210 2xl:h-210">
                <img src={'/imgs.svg'} />
              </div>
              <div className="relative bg-white/100 dark:bg-dark/80 w-full lg:w-500px max-w-full rounded-3xl p-6 md:p-12 pr-8 pb-5 transition duration-250 perspective-right hover:scale-106 shadow-lg">
                <h2 className="text-xl mb-5 font-bold sm:text-2xl txt-0">稳定运营</h2>
                <p className="text-lg leading-8 text-muted">
                  我们为您提供可持续高质量的服务，采用先进的技术架构，确保API服务的稳定性和高可用性。
                </p>
                <ul>
                  <li>
                    <div className="w-8 h-8 rd-full flex-center text-base text-white bg-blue">
                      <i className="flex-center i-tabler:moneybag"></i>
                    </div>
                    <div>
                      <b className="text-15px">按量付费</b>
                      <div>用多少买多少，余额不过期，用完为止，可再充值</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="absolute top-0 bottom-0 left-0 right-0 h-800px flex justify-center -z-10 of-hidden bg-gradient-to-t from-white/0 via-cyan-500/10 to-white/0"></div>
        </section>
      </div>
      <section className="px-5 lg:px-8 py-10 md:py-16 lg:py-20">
        <div className="mx-auto max-w-7xl">
          <div className="mx-auto lg:text-center mb-6 md:mb-16">
            <h2 className="text-3xl mb-5 font-bold sm:text-3xl txt-0">完善的服务体系</h2>
            <p className="text-lg leading-8 text-muted">
              把复杂的模型对接交给我们，仅需注册账号、充值并绑定应用使用即可
            </p>
          </div>
          <section className="w-full mb-5 grid md:grid-cols-2 xl:grid-cols-3 gap-6">
            {[1, 2, 3, 4, 5, 6].map((item) => {
              return (
                <Card key={item} hoverable className={'rounded-3xl '}>
                  <div className={'flex flex-col items-center'}>
                    <div className="mb-6">
                      <img
                        width="70"
                        src="https://img.icons8.com/glassmorphism/130/open-book.png"
                      />
                    </div>
                    <h3 className="mb-5 text-xl">使用教程</h3>
                    <p className="text-muted">首次使用请务必认真查看新手教程</p>
                    <div className="home-card-content text-base txt-1 flex-grow">
                      请先
                      <a className="mx-1 a-line" href="/register">
                        注册账号
                      </a>
                      ，然后
                      <a className="mx-1 a-line" href="/panel/topup">
                        充值或兑换
                      </a>
                      余额，再前往
                      <a className="mx-1 a-line" href="/panel/token">
                        令牌管理
                      </a>
                      ，绑定聊天或复制API地址+KEY搭配使用。
                    </div>
                    <div className="space-x-2 pt-3">
                      <a
                        className="flex-y-center text-base fw-semibold txt-0"
                        href="/help?tab=guide"
                        target="_self"
                      >
                        新手入门<i className="flex-center i-charm:arrow-right ml-2"></i>
                      </a>
                    </div>
                  </div>
                </Card>
              );
            })}
          </section>
        </div>
      </section>
    </>
  );
};

export default Index;
